<form method="post">
    <div style="margin: 10px 20px 30px 0px">
        {#  csrf_token的本质作用就是混淆发送给后端的参数#}
        {{form.csrf_token}}
    主机名：{{form.tag_id}}
         ip地址：{{form.ip}}
    {{form.submit}}
</div>
</form>
    <script>
        function selected() {
        var obj = document.getElementById("tag_id"); //定位id
        var index = obj.selectedIndex; // 选中索引
        var text = obj.options[index].text; // 选中文本
        var value = obj.options[index].value; // 选中值
        document.getElementById("ip").value=value;
        document.cookie="ip="+value
        document.cookie="host="+text
        cpu(text,value)
    }
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<script>
   function cpu(host,ip) {
       $(function () {
           // 使用当前时区，否则东八区会差八个小时
           Highcharts.setOptions({
               global: {
                   useUTC: true
               }
           });
           $.getJSON('/cpu', function (result) {
               var data=new Array();
               var data1=new Array();
               for(var i=0;i<result.length;i++)
               {
                       data.push(result[i])
                       data1.push(result[i][1])
               }
                //最新
                document.getElementById("last1").innerText=data[data.length - 1][1].toFixed(2)
                //最小
                document.getElementById("min1").innerText=Math.min.apply(null, data1).toFixed(2)

                //最大
                document.getElementById("max1").innerText=Math.max.apply(null, data1).toFixed(2)
                //平均
                document.getElementById("avg1").innerText=average(data).toFixed(2)


               document.getElementById("info").style.display='';
               // Create the chart
               $('#container').highcharts('StockChart', {
                      legend: {
                              enabled: true,
                              layout: 'vertical',
                              align: 'left',
                              verticalAlign: 'middle',
                              backgroundColor: '#000000',
                              borderColor: 'black',
                              borderWidth: 2,
                              shadow: true
                          },
                                rangeSelector: {
                              buttons: [{
                                  count: 5,
                                  type: 'minute',
                                  text: '5分钟'
                              }, {
                                  count: 1,
                                  type: 'hour',
                                  text: '1小时'
                              }, {
                                  count: 2,
                                  type: 'hour',
                                  text: '2小时'
                              },{
                                  count: 1,
                                  type: 'day',
                                  text: '1天'
                              },{
                                  count: 2,
                                  type: 'day',
                                  text: '2天'
                              }, {
                                  type: 'all',
                                  text: 'All'
                              }],
                              inputEnabled: true,
                              selected: 2
                          },

                   title: {
                       text: 'CPU使用率监控'
                   },
                   subtitle: {
                  text: host+'/'+ip,
                  style:{
                      color:'#00CED1'
                  }
                       },
                   series: [{
                       name: 'CPU使用率',
                       data: data,
                       type: 'spline',
                       tooltip: {
                           valueDecimals: 2
                       }
                   }]
               });
           });

       })
   }
</script>

<div style="min-width:400px;height:400px;top: 280px;display: none;font-family: Verdana,Arial,sans-serif;font-size: 11px;color: #333333;border-width: 1px" id="info" >
<table width="400" >
  <tr>
    <th align="left"></th>
    <th>最新/%</th>
    <th>最小/%</th>
    <th>平均/%</th>
    <th>最大/%</th>
  </tr>
  <tr>
    <td width="140" style="border-right-style:none;" >CPU使用率 :</td>
    <td width="60" style="border-right-style:none" id="last1"></td>
    <td width="60" style="border-right-style:none" id="min1"></td>
    <td width="60" style="border-right-style:none" id="avg1"></td>
    <td width="60" style="border-right-style:none" id="max1"></td>
  </tr>
</table>
</div>
</body>
</html>


